/*
 * @description: 淘客商品
 * @Author: along
 * @Date: 2020-04-09
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container goodTkList">
        <!-- header -->
        <div class="header">
            <p class="header_title">淘客商品</p>
        </div>

        <!-- filter -->
        <div class="search">
            <div class="search_left">
                <div class="search_item border">
                    <el-dropdown @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{ command_name }}
                            <i class="iconfont icon-zhedie1" :style="{marginLeft: '25px'}"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="商品名称">商品名称</el-dropdown-item>
                            <el-dropdown-item command="商品编号">商品编号</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <p class="search_lines"></p>
                    <el-input
                        v-if="command_name == '商品名称'"
                        v-model="formData.keyword"
                        placeholder="请输入商品名称"
                        size="medium"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        class="search_input"
                    />
                    <el-input
                        v-if="command_name == '商品编号'"
                        v-model="formData.goods_no"
                        placeholder="请输入商品编号"
                        size="medium"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                        class="search_input"
                    />
                </div>
                <div class="search_item">
                    <p class="search_item_title">商品分类</p>
                    <el-cascader
                        v-model="formData.goods_type"
                        :options="goodsTypesList"
                        :props="{
                            value: 'no',
                            label: 'title',
                            children: 'children'
                        }"
                        expand-trigger="click"
                        clearable
                        :filterable="true"
                        class="input-unit-value"
                        size="small"
                        @change="getTableData(1)"
                        change-on-select
                        placeholder="不限"
                        separator="-"
                    />
                </div>
            </div>
            <div class="search_right">
                <div class="search_item right0">
                    <el-button
                        size="medium"
                        type="primary"
                        :style="{width: '150px'}"
                        @click="fnAddTkShop()"
                    >
                        添加淘客商品
                    </el-button>
                </div>
            </div>
        </div>

        <!-- table -->
        <el-table
            v-if="tableData.length"
            :data="tableData"
            height="100%"
            class="common-table"
            style="width: calc(100% - 64px);margin-left: 32px;margin-right:32px"
            v-loading="loading"
            @sort-change="handleSortChanged"
            ref="tableDataList"
        >
            <el-table-column
                header-align="left"
                :width="300"
                label="商品名称"
            >
                <template slot-scope="scope">
                    <div
                        class="good-detail"
                        style="cursor:pointer"
                        @click="fnGoTaobao(scope.row.goods_url)"
                    >
                        <div
                            class="cover"
                            :style="'background-image: url('+scope.row.goods_cover+')'"
                        />
                        <div class="detail ellipsis">
                            <div class="title ellipsis">
                                {{ scope.row.goods_title }}
                            </div>
                            <div class="no ellipsis">
                                ID: {{ scope.row.goods_no }}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="type_name"
                label="分类"
                show-overflow-tooltip
                :width="150"
            >
                <template slot-scope="scope">
                    <p
                        @click="fnEditTkType(scope.row)"
                        class="el-type-cont"
                    >
                        <span class="el-type-name">{{ scope.row.type_name }}-{{ scope.row.sub_type_name }}</span>
                        <i class="el-icon-edit" />
                    </p>
                </template>
            </el-table-column>
            <el-table-column
                prop="goods_price"
                label="淘宝售价"
                sortable="custom"
                :width="130"
            />
            <el-table-column
                prop="coupon_money"
                label="优惠券"
                sortable="custom"
                :width="130"
            />
            <el-table-column
                prop="goods_price_pay"
                label="学生价"
                sortable="custom"
                :width="130"
            >
                <template slot-scope="scope">
                    {{ scope.row.goods_price - scope.row.coupon_money | setPrice }}
                </template>
            </el-table-column>
            <el-table-column
                prop="goods_commission"
                label="佣金"
                sortable="custom"
            />
            <el-table-column
                prop="goods_commission_rate"
                label="佣金比例"
            />
            <el-table-column
                prop="goods_sale"
                label="已售"
            />
            <el-table-column
                prop="goods_view"
                label="浏览量"
                show-overflow-tooltip
            />
            <el-table-column
                prop="goods_view_increase"
                label="昨日浏览量"
                show-overflow-tooltip
                :width="110"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="goods_sort"
                label="排序"
                :width="120"
            >
                <template slot-scope="scope">
                    <div class="sort-wrap">
                        {{ scope.row.goods_sort }}
                        <span class="sort-spliter" />
                        <el-button
                            type="text"
                            class="btn-sort"
                            @click="fnEditSort(scope.row)"
                        >
                            <i class="el-icon-edit" />
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="goods_cost_price"
                label="成本价"
            />
            <el-table-column
                prop="audit_status"
                :min-width="110"
                :formatter="audioStatusFormatter"
                label="审核状态"
            >
                <template slot-scope="scope">
                    <div class="task-review-status">
                        <template v-if="scope.row.audit_status == -1">
                            <el-popover
                                placement="top"
                                width="200"
                                trigger="hover"
                                :content="scope.row.audit_reason"
                                title="被驳回理由"
                                popper-class="reson-popper"
                            >
                                <span
                                    class="status deny"
                                    slot="reference"
                                >
                                    审核失败<i
                                        class="iconfont icon-gantanhao-sanjiaokuang"
                                        slot="reference"
                                    />
                                </span>
                            </el-popover>
                        </template>
                        <template v-if="scope.row.audit_status == 0">
                            <span class="status wait-submit">待审核</span>
                        </template>
                        <template v-if="scope.row.audit_status == 1">
                            <span class="status completed">审核通过</span>
                        </template>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="goods_status"
                :min-width="110"
                label="上架状态"
            >
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.goods_status"
                        :active-value="1"
                        :inactive-value="0"
                        :disabled="scope.row.audit_status != 1"
                        @change="fnChangeStatus(scope.row.goods_no, scope.row.goods_status)"
                    />
                </template>
            </el-table-column>
            <el-table-column
                prop="date"
                label="操作"
                fixed="right"
                :width="90"
            >
                <template slot-scope="scope">
                    <div
                        class="el-data-style"
                        :style="{flexWrap: 'wrap'}"
                    >
                        <el-button
                            type="text"
                            class="btn-nopadding"
                            @click="fnScekillDelete(scope.row)"
                        >
                            删除
                        </el-button>
                        <el-button
                            type="text"
                            class="btn-nopadding"
                            style="margin-left: 0px !important;margin-top:6px !important"
                            @click="fnSetPrice(scope.row)"
                        >
                            设置成本价
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 无数据展示 -->
        <img
            v-if="!tableData.length"
            src="http://cdn.zsdx.cn/wei/images/hire/manage/market/empty-good-list.png"
            class="page_images"
            :style="{width: '500px', marginLeft: '50%', marginTop: '120px', transform: 'translate(-50%,0%)'}"
        >

        <!-- 分页 -->
        <div class="pagination-wrapper clearfixNew" v-if="tableData.length">
            <el-pagination
                background
                :current-page.sync="page.now_page"
                :page-size="page.page_size"
                layout="total, prev, pager, next, jumper"
                :total="page.total_count"
                @current-change="getTableData"
            />
        </div>


        <!-- 图片预览 -->
        <img-preview ref="preview" />

        <!-- 编辑淘客商品 -->
        <el-dialog
            title="修改分类"
            :visible.sync="dialogVisibleEditTk"
            width="553px"
            class="demo-ruleFormTk"
        >
            <el-form
                :model="ruleFormEditTk"
                label-width="50px"
            >
                <el-form-item
                    label="分类"
                    prop="type_no"
                >
                    <el-cascader
                        v-model="ruleFormEditTk.type_no"
                        :options="goodsTypesList"
                        :props="{
                            value: 'no',
                            label: 'title',
                            children: 'children'
                        }"
                        expand-trigger="click"
                        clearable
                        :filterable="true"
                        class="input-unit-value"
                        size="small"
                        @change="getTableData(1)"
                        change-on-select
                        placeholder="请选择商品分类"
                        separator="-"
                        style="width:100%"
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
                style="display:flex;justify-content:center"
            >
                <el-button
                    @click="dialogVisibleEditTk = false"
                    size="small"
                    style="width:100px;margin-right:20px"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="fnConfirmchangeTkShop()"
                    style="width:100px"
                >确 定</el-button>
            </span>
        </el-dialog>

        <!-- 退货地址弹窗 -->
        <adress-dialog
            ref="adressDialog"
            @close="fnCloseAdressDialog"
        />

        <!-- 添加淘客商品 -->
        <el-dialog
            title="添加淘商品"
            :visible.sync="dialogVisibleTk"
            width="553px"
            class="demo-ruleFormTk"
        >
            <el-form
                :model="ruleFormTk"
                :rules="rulesTk"
                ref="ruleFormTk"
                label-width="100px"
            >
                <el-form-item
                    label="商品链接"
                    prop="link"
                >
                    <el-input
                        type="textarea"
                        v-model="ruleFormTk.link"
                        :autosize="{ minRows: 4, maxRows: 8}"
                        placeholder="请输入商品链接,此商品在淘宝的商品页链接"
                    />
                </el-form-item>
                <el-form-item
                    label="商品分类"
                    prop="type_no"
                >
                    <el-cascader
                        v-model="ruleFormTk.type_no"
                        :options="goodsTypesList"
                        :props="{
                            value: 'no',
                            label: 'title',
                            children: 'children'
                        }"
                        expand-trigger="click"
                        clearable
                        :filterable="true"
                        class="input-unit-value"
                        size="small"
                        @change="fnGetData(1)"
                        change-on-select
                        placeholder="请选择分类"
                        separator="-"
                        style="width:100%"
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
                style="display:flex;justify-content: center;"
            >
                <el-button
                    @click="dialogVisibleTk = false"
                    size="small"
                    style="width:100px"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="fnConfirmTkShop('ruleFormTk')"
                    style="width:100px"
                >提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import imgPreview from '@/components/common/img-preview';
import getZdAccountInfo from '@/assets/mixin/check-info';
import getRequire from '@/assets/mixin/check-info';
import getAdress from '@/assets/mixin/check-info';
import adressDialog from '@/components/manage/market/adress-dialog';

export default {
    components: {
        imgPreview,
        adressDialog
    },
    mixins: [getZdAccountInfo, getRequire, getAdress],
    data() {
        return {
            goods_no: '',
            command_name: '商品名称',//默认展示名称
            formData: {
                keyword: '',
                goods_no: '',
                goods_type: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [{
                audit_reason: "",
                audit_status: 1,
                coupon_money: "0.00",
                goods_commission: "7.55",
                goods_commission_rate: "5.10",
                goods_cost_price: "1.00",
                goods_cover: "https://img.alicdn.com/bao/uploaded/i1/3173051986/O1CN01JThpgh1QXdFzUqVVv_!!3173051986.jpg",
                goods_no: "go_aee50b22b37f9",
                goods_price: "148.00",
                goods_price_origin: "296.00",
                goods_price_pay: 148,
                goods_sale: 4151,
                goods_sort: 99,
                goods_status: 1,
                goods_title: "木林森男士夹克外套春秋季2021年新款潮流教练衫式帅气休闲装上衣",
                goods_url: "https://item.taobao.com/item.htm?id=626173968378",
                goods_view: 0,
                goods_view_increase: 0,
                sub_type_name: "衬衫",
                type_name: "男装"
            }],
            loading: false,
            goodsTypesList:[],
            ruleFormEditTk: {
                type_no: ''
            },
            dialogVisibleEditTk: false,
            dialogVisibleTk: false,
            filterDataSort: {
                sort_field: 0,
                sort_type: 0
            },
            ruleFormTk: {
                link: '',
                type_no: ''
            },
            rulesTk: {
                link: [
                    { required: true, message: '请输入商品链接,不可以为空', trigger: 'blur' }
                ],
                type_no: [
                    { required: true, message: '请选择商品分类,不可以为空', trigger: 'blur' }
                ]
            },
        };
    },
    filters: {
        setPrice (val) {
            return val.toFixed(2);
        }
    },
    computed: {
    },
    watch: {
        ...mapState({

        })
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面
         */
        init () {
            this.$store.commit('header/SET_HEADER',[{ title: '校园商城' }, { title: '商品管理' }, { title: '淘客商品列表' }]);
            this.getTableData();
            this.getGoodsTypeList();
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('', {
                page_id: page || this.page.now_page,
                goods_no: this.formData.goods_no,
                keyword: this.formData.keyword,
                type_no: (this.formData.goods_type && this.formData.goods_type.length >= 1) ? this.formData.goods_type[0] : '',
                sub_type_no: (this.formData.goods_type && this.formData.goods_type.length >= 2) ? this.formData.goods_type[1] : '',
                sort_field: this.filterDataSort.sort_field,
                sort_type: this.filterDataSort.sort_type
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;

                    setTimeout(() => {
                        this.$refs.tableDataList.doLayout();
                    },0);
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 获取商品分类数据
         */
        getGoodsTypeList () {
            this.$post('', {
                //
            }, resp => {
                if (resp.code == 1) {
                    this.goodsTypesList = resp.data.list;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 添加淘客商品
         */
        fnAddTkShop () {
            this.getRequire().then(type => {
                if(!type) {
                    this.getAdress().then(el => {
                        if(!el) {
                            this.$refs.adressDialog.show();
                        } else {
                            this.dialogVisibleTk = !this.dialogVisibleTk;
                        }
                    });
                } else {
                    this.getZdAccountInfo(resp => {
                        if(resp == -1) {
                            this.$refs.accountDialog.show();
                            return;
                        } else {
                            this.getAdress().then(el => {
                                if(!el) {
                                    this.$refs.adressDialog.show();
                                } else {
                                    this.dialogVisibleTk = !this.dialogVisibleTk;
                                }
                            });
                        }
                    });
                }
            });
        },

        /**
         *  @description 确认添加淘客商品
         */
        fnConfirmTkShop (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('', {
                        type_no: this.ruleFormTk.type_no[this.ruleFormTk.type_no.length - 1],
                        content: this.ruleFormTk.link
                    }).then(resp => {
                        if (resp.code == 1) {
                            this.getTableData();
                            this.dialogVisibleTk = !this.dialogVisibleTk;
                            this.$notify({
                                title: '提示',
                                message: '添加成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },


        /**
         * @description 关闭退货地址弹窗
         */
        fnCloseAdressDialog () {
            this.$refs.adressDialog.close();
        },

        /**
         * @description 切换搜索内容
         */
        handleCommand (event) {
            try {
                if(!event) return false;
                this.command_name = event;
            } catch (error) {
                console.log('error:' + error);
            }
        },

        /**
         * @description 编辑淘客分类
         */
        fnEditTkType (row) {
            let type_no = [];

            this.goods_no = row.goods_no;
            this.goodsTypesList.map(item=>{
                if (item.title == row.type_name) {
                    type_no.push(item.no);
                    item.children.map(option => {
                        if (option.title == row.sub_type_name) {
                            type_no.push(option.no);
                            return false;
                        }
                    });
                }
            });

            setTimeout(()=>{
                this.ruleFormEditTk = {
                    type_no: type_no
                };
                this.dialogVisibleEditTk = !this.dialogVisibleEditTk;
            },100);
        },

        /**
         * @description 确定编辑淘客商品
         */
        fnConfirmchangeTkShop () {
            if (this.ruleFormEditTk.type_no == '') {
                this.$notify({
                    title: '警告',
                    message: '商品分类不可以为空',
                    duration: 2000,
                    type: 'warning'
                });
                return;
            }

            this.$post('', {
                goods_no: this.goods_no,
                type_no: this.ruleFormEditTk.type_no[this.ruleFormEditTk.type_no.length - 1]
            }, resp => {
                if (resp.code == 1) {
                    this.dialogVisibleEditTk = !this.dialogVisibleEditTk;
                    this.$notify({
                        title: '提示',
                        message: '编辑成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 淘客排序
         */
        fnEditSort (row) {
            this.$prompt('请输入排序号', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^([1-9]\d?|[1-9]\d+)$/,
                inputErrorMessage: '排序号格式不正确,请重新输入'
            }).then(({ value }) => {
                this.$post('',{
                    goods_no: row.goods_no,
                    goods_sort: value
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '操作成功',
                            duration: 2000,
                            type: 'success'
                        });
                    } else if (resp.code == 0) {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description 删除商品
         */
        fnScekillDelete(no) {
            this.$confirm('确认删除该项?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('', {
                    goods_no: row.goods_no
                }, resp => {
                    if (resp.code == 1) {
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            duration: 2000,
                            type: 'success'
                        });
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '警告',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * @description 设置成本价
         */
        fnSetPrice (row) {
            this.$prompt('请输入成本价', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
                inputErrorMessage: '格式不正确,请重新输入'
            }).then(({ value }) => {
                this.$post('', {
                    goods_no: row.goods_no,
                    goods_cost_price: value
                }, resp => {
                    if(resp.code == 1){
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            message: '设置成功',
                            duration: 2000,
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            });
        },

        /**
         * @description 跳转淘客
         */
        fnGoTaobao (url) {
            if (url) {
                window.open(url);
            } else {
                return;
            }
        },

        /**
         * @description 排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 'asc',
                descending: 'desc'
            };

            let sortFieldMap = {
                goods_price: 'goods_price',
                coupon_money: 'coupon_money',
                goods_price_pay: 'goods_price_pay',
                goods_commission: 'goods_commission'
            };

            if (data.order) {
                this.filterDataSort.sort_field = sortFieldMap[data.prop];
                this.filterDataSort.sort_type = sortTypeMap[data.order];
            } else {
                this.filterDataSort.sort_field = '';
                this.filterDataSort.sort_type = '';
            }

            this.getTableData();
        },

        /**
         * @description 拼团设置上架状态
         */
        fnChangeStatus(no, status) {
            this.$post('', {
                goods_no: no,
                goods_status: status
            }, resp => {
                if (resp.code == 1) {
                    this.$notify({
                        title: '提示',
                        message: '状态修改成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },


        /**
         * @description: 预览图片
         */
        fnPrievimage (images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * @description 拼团，状态过滤
         */
        audioStatusFormatter(column, row, value) {
            switch (value) {
                case 0:
                    return '待审核';
                case 1:
                    return '审核通过';
                case 2:
                    return '审核通过';
                default:
                    return '未知';
            }
        },
    },
};
</script>

<style lang="less">
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .header {
        width: 100%;
        height: 58px;
        box-sizing: border-box;
        border-bottom: 1px rgba(235, 238, 245, 1) solid;
        padding: 0 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header_title {
            color: rgba(51, 51, 51, 1);
            font-size: 18px;
            font-weight: 500;
        }
        .header_config {
            display: flex;
            align-items: center;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            cursor: pointer;
            .icon-shezhi {
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                margin-right: 5px;
            }
        }
    }
    .search {
        width: calc(100% - 64px);
        display: flex;
        flex-wrap: wrap;
        margin: 0 32px;
        margin-bottom: 24px;
        justify-content: space-between;
        .search_left, .search_right {
            display: flex;
            align-items: center;
        }
        .search_item {
            margin-top: 24px;
            height: 36px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-radius: 4px;
            padding-left: 23px;
            cursor: pointer;
            margin-right: 9px;
            .search_lines {
                width: 1px;
                height: 14px;
                background-color: rgba(153, 153, 153, 1);
                margin: 0 16px 0 13px;
            }
            .search_item_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 10px;
            }
        }
        .border {
            border: 1px rgba(194, 194, 194, 1) solid;
        }
        .right0 {
            margin-right: 0px;
        }
    }
    .good-detail {
        display: flex;
        align-items: center;
        .cover {
            flex-shrink: 0;
            flex-grow: 0;
            width: 108px;
            height: 108px;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-right: 16px;
            cursor: pointer;
        }
        .detail {
            width: 186px;
            .title {
                font-size: 12px;
                color: rgba(51, 51, 51, 1);
                line-height: 17px;
                letter-spacing: 1px;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 8px;
            }
            .no {
                font-size: 12px;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 17px;
                margin-top: 8px;
            }
            .type {
                font-size: 12px;
                font-weight: 400;
                color: rgba(96, 105, 114, 1);
                line-height: 17px;
                margin-top: 7px;
            }
        }
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 32px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
</style>

<style lang="less">
.goodTkList {
    .el-dropdown {
        white-space: nowrap;
    }
    .search_input {
        .el-input__inner {
            width: 260px;
            border: none;
            height: 34px;
        }
    }
    .__el_dialog {
        .el-checkbox {
            margin-top: 24px;
        }
        .el-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            .el-checkbox {
                margin-top: 24px;
                margin-right: 0px;
                width: calc(100% / 3);
            }
        }
    }
    .el-dialog__body {
        padding-left: 58px;
        padding-right: 58px;
        padding-top: 30px;
        padding-bottom: 00px;
    }

    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
}
.cursor-font {
    color: #409EFF;
    cursor: pointer;
}
</style>